<template>
    <div class="app-container">
        <!-- rules表单验证规则 -->
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="medium">
            <el-form-item label="产品品号" prop="productNo">
                <el-input v-model="form.productNo" @blur="checkproductNo" style="width:300px" />
            </el-form-item>
            <el-form-item label="产品名称" prop="produceName">
                <el-input v-model="form.produceName" style="width:300px" disabled placeholder="请输入产品品号获取产品名称"/>
            </el-form-item>
            <el-form-item label="规格" prop="specification">
                <el-input v-model="form.specification" style="width:300px" disabled placeholder="请输入产品品号获取规格"/>
            </el-form-item>
            <el-form-item label="版本" prop="version">
                <el-input v-model="form.version" style="width:300px" />
            </el-form-item>
            <el-form-item label="启用时间" prop="effectiveTime">
                <el-date-picker v-model="form.effectiveTime" format="yyyy-MM-dd HH:mm:ss" value-format="timestamp" type="datetime" placeholder="选择日期时间" style="width:300px" />
            </el-form-item>
            <el-form-item label="变更说明" prop="desc">
                <el-input v-model="form.desc" type="textarea" style="width:300px" />
            </el-form-item>
            <el-form-item label="文档上传" prop="ecnUrl">
                <el-upload
                class="avatar-uploader"
                action="http://192.168.3.11:8086/technologyFile"
                :on-success="handlePdfSuccess"
                :on-remove = "removePdf"
                :headers="getHttpHeader"
                :before-upload="beforeFilsUpload">
                    <el-button size="small" type="primary">添加附件</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">添加</el-button>
                <el-button type="primary" @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { checkProductNo, addEcn } from '@/api/ECN.js'
export default {
    data() {
        return {
            form: {
                productNo: '',                          //产品品号
                version: '',                            //版本
                produceName: '',                        //产品名称
                specification: '',                      //规格
                desc: '',                               //备注
                effectiveTime: '',
                ecnUrl: ''
            },
            rules: {
                productNo: [
                    { required: true, message: '请输入产品品号', trigger: 'blur' }
                ],
                version: [
                    { required: true, message: '请输入版本', trigger: 'blur' }
                ],
                produceName: [
                    { required: true, message: '请输入产品名称', trigger: 'blur' }
                ],
                specification: [
                    { required: true, message: '请输入规格', trigger: 'blur' }
                ],
                effectiveTime: [
                    { required: true, message: '请输入启用时间', trigger: 'blur' }
                ],
                ecnUrl: [
                    { required: true, message: '请添加附件', trigger: 'blur' }
                ]
            },
            getHttpHeader: {                    //上传文件的头
                Authorization: '',              //传输文件的token
                CHECK_USER_VALUE: 'GOLWAY',
                CHECK_PASSWORD_VALUE: '8D4DD3F80CEB6149329FDBD590B164F1'
            }
        }
    },
    methods: {
        // 提交表单之前先进行验证
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.onSubmit()
            } else {
                return false
                }
            })
        },
        // 根据输入的productNo来获取produceName与specification,并将其填入表单
        async checkproductNo() {
            const { data,msg,code } = await checkProductNo({productNo: this.form.productNo})
            if(code == 1){
                this.form.produceName = data.produceName
                this.form.specification = data.specification
            } else {
                this.$message({
                    message: msg,
                    type: 'warning'
                })
            }
        },
        async onSubmit() {
            let query = Object.assign({},this.form)
            const data = await addEcn(query)
            if(data.code == '1'){
            this.$message({
              type: 'success ',
              message: '添加成功'
                })
            } else {
            this.$message({
              type: 'warning',
              message: '添加失败'
            })
            }
        },
        // 对整个表单输入进去清空
        resetForm(formItem) {
          this.$refs[formItem].resetFields()
        },
        // 文件上传之前的函数，将token传入头中
        beforeFilsUpload(file) {
            this.getHttpHeader.Authorization = this.dealCookie()
        },
        // cookies的处理函数
        dealCookie() {
            const strcookie = document.cookie                     //获取cookie字符串
            const arrcookie = strcookie.split("; ")               //分割
            for ( var i = 0; i < arrcookie.length; i++) {
                const arr = arrcookie[i].split("=")
                if (arr[0] == "agent_Authorization") {
                    return arr[1]
                }
            }
            return ""
        },
        // 上传PDF文档成功回调函数
        handlePdfSuccess(response) {
            console.log(response)
            this.form.ecnUrl = response.results
            console.log(11,this.form.ecnUrl)
        },
        // 移除pdf
        async removePdf(file) {
            return this.form.ecnUrl = ''
        },
    }
}
</script>

<style>

</style>